<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue组件使用细节之ref和$refs第一步</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 1. vue中想要操作dom,需要使用到ref属性,这个属性的值是指的一个对象,属性值就是下面要引用这个ref的属性名.这个对象就是当前ref所在的div,如果这个ref是在组件当中,那么这个ref引用的就是这个组件了 -->
        <div ref="haha" @click='divClick'>哈哈</div> <!-- 2. 添加一个单击事件 -->
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            methods: {
                divClick: function () { 
                    // 3. 要想操作dom除了添加ref属性外,还要使用实例的$refs属性来获取这个ref,这个属性里包含了所有的ref
                    console.log(this.$refs.haha); // 4. 打印这个ref引用的dom元素
                    
                    alert(this.$refs.haha.innerHTML) // 5. 可以通过dom元素获取div的值
                }
            },
        })
    </script>
</body>

</html>